<template>
  <span class="node-name-title">
    <el-input
      ref="imputRef"
      v-if="isInput"
      type="text"
      autofocus
      @blur="isInput = false"
      :model-value="value"
      @update:model-value="$emit('update:value', $event)"
      :style="{ width: width }"
    />
    <span v-else @click.stop="clickEvent()">{{ value }}</span>
  </span>
</template>

<script setup name="EditName">
import { ref, toRefs, nextTick, watch } from "vue";
const isInput = ref(false);
const imputRef = ref();
const emit = defineEmits(["update:value", "input", "edit"]);
const props = defineProps({
  value: {
    type: String,
    required: false,
  },
  width: {
    type: String,
    required: false,
    default: "85%",
  },
});

const { value, width } = toRefs(props);

const clickEvent = (index) => {
  isInput.value = true;
  // emit('edit', false);
};
const blurEvent = (index) => {
  isInput.value = false;
  // emit('input', value);
  // emit('edit', true);
};

watch(isInput, () => {
  if (isInput.value) {
    nextTick(() => {
      console.log("------------",imputRef.value);
      imputRef.value.focus();
    });
  }
});
</script>

<style lang="scss" scoped>
.node-name-title {
  display: inline-block;
  
  .el-input {
    margin: -4px 0;
  }
  
  span {
    cursor: pointer;
    
    &:hover {
      color: var(--el-color-primary);
    }
  }
}
</style>

<script>
import { flowMixin } from "../mixins/flowMixin";

export default {
  mixins: [flowMixin],
};
</script>
